<template>
  <el-dialog :visible.sync="internalDialogVisible" title="编辑违禁品类别" class="center-dialog-title" @close="onClose">
    <el-form class="my-el-form">
      <el-form-item label="类别">
        <el-select v-model="info.selectedOption" placeholder="请选择" style="width: 50%;" @change="handleChange">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item v-if="showAnotherInput" label="类别">
        <el-input v-model="anotherInputValue" placeholder="另一个输入框" style="width: 50%;" />
      </el-form-item>

      <el-form-item label="名称">
        <el-input v-model="info.inputValue" placeholder="输入框" style="width: 50%;" />
      </el-form-item>
    </el-form>
    <div class="button-container">
      <el-button size="mini" type="primary" @click="summit">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addCategory, updateCategory } from '@/api/categorySettings'
import { Message } from 'element-ui'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    options: {
      type: Array,
      default: () => [() => { }]
    },
    info: {
      default: () => ({
        selectedOption: '',
        inputValue: '',
        itermId: ''
      })
    }
  },
  data() {
    return {
      anotherInputValue: '',
      internalDialogVisible: this.dialogVisible,
      showAnotherInput: false
    }
  },
  watch: {
    // 监听prop的变化
    dialogVisible(newVal) {
      this.internalDialogVisible = newVal
    },
    options: {
      handler(newVal) {
        this.internalOptions = newVal.slice()
      }
    },
    info: {
      immediate: true,
      handler(newValue) {
        this.info.selectedOption = newValue.selectedOption
        console.log(this.info.selectedOption)
      }
    }
  },
  methods: {
    handleChange(value) {
      this.showAnotherInput = value === 'other'
    },
    onClose(mode = 0) {
      this.options = []
      this.$emit('on-close', mode)
    },
    summit() {
      // 存在itemId说明此时是编辑
      if ('itemId' in this.info) {
        console.log('编辑')
        var params = {
          categoryName: this.info.selectedOption,
          name: this.info.inputValue,
          id: this.info.itemId
        }
        if (this.showAnotherInput) {
          params.categoryName = this.anotherInputValue
        }
        updateCategory(params).then(res => {
          this.onClose(1)
        }).catch(e => {
          console.log(e)
        })
      } else {
        params = {
          categoryName: this.info.selectedOption,
          name: this.info.inputValue
        }
        if (this.showAnotherInput) {
          params.categoryName = this.anotherInputValue
        }
        addCategory(params).then(res => {
          console.log(res.code)
          if (res.code === 200) {
            Message({
              message: '添加成功！',
              type: 'success',
              duration: 3000
            })
            this.onClose(1)
          } else {
            Message({
              message: 'error',
              type: 'error',
              duration: 3000
            })
          }
          this.onClose(1)
        }).catch(e => {
          console.log(e)
        })
      }
    }
  }
}
</script>
<style scoped>
.center-dialog-title>>>.el-dialog__header {
  text-align: center;
}

.my-el-form {
  margin-left: 10rem;
}

.button-container {
  display: flex;
  justify-content: center;
}
</style>
